<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .box1
    {
        width: 200px;
        height: 200px;
        background-color: blue;
        border: 10px solid red;
        /*
        外边距不会影响盒子可见框的大小
        但是外边距会影响盒子的位置
        一共有四个方向的外边距
        margin-top
        上外边距，设置一个正值，元素会向下移动
        margin-right
        默认情况下，设置margin-right不会产生任何效果
        margin-bottom
        下外边距，设置一个正值，其下边的元素会向下移动
        margin-left
        左外边距，设置一个正值，元素会向右移动

        margin也可以设置负值，如果设置负值，则会向相反的方向移动

        元素在页面中是按照自左向右的顺序排列，元素会尽量的往左上角靠拢
        所以默认情况下，如果我们设置的左和上外边距则会移动元素自身
        而设置下和右外边距则会移动其他元素
        margin的简写属性跟padding一样，都是四个方向
        */
        margin-top: 100px;/*元素往下移动了100px*/
        margin-left: 100px;/*元素向右移动了100px*/
        margin-bottom: 100px;
    }
    .box2
    {
        width: 220px;
        height: 220px;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>